<template>
	<view>
		<view class="search">
			<view style="display: flex;align-items: center;">
				<uni-icons type="search" size="20"></uni-icons>
				<input class="uni-input" v-model="userName" placeholder="搜索用户备注或名字" @input="searchInput" @confirm="searchInput" />
			</view>

			<view v-if="showClearIcon" @click="clearIcon">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>

		</view>
		<view class="listContent" v-for="(item,index) in listData">
			<view class="listItem">
				<view style="display: flex;align-items: center;" @tap="toliaotian(item.userId)">
					<image :src='httpUrl+"/app/file/viewFile?fileId="+item.avatar' style="width: 8vw;height: 8vw;margin-right: 2vw;"></image>
					<text class="textItem">{{item.userName}}</text>
				</view>
				<view style="display: flex;align-items: center;">
					<image v-if="item.storeId >0" @tap="toPersonStore(item.storeId)" src="@/static/icons/my/shopping.png" style="width: 8vw;height: 8vw;margin-right: 2vw"></image>
					<image @tap="toPersonInfo(item.userId)" src="@/static/img/my/info.png" style="width: 8vw;height: 8vw;margin-right: 2vw"></image>
					<image @tap="toUser(item.userId)" src="@/static/img/my/qiangqiang.png" style="width: 8vw;height: 8vw;"></image>
					<view @tap="doCancelFollow(item.userId,index)" v-if="item.interrelationFlag=='NO'" class="follow">已关注</view>
					<view @tap="chooseFollow(item.userId,index)" v-if="item.interrelationFlag=='YES'" class="follow">互相关注</view>
					<view @tap="doSaveFollow(item.userId,index)" v-if="item.interrelationFlag=='FOLLOW'" class="follow">关注</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { queryMyFollow, cancelFollow, saveFollow } from '@/utils/api/userinfo.ts'
	const httpUrl = getApp().globalData.baseUrl


	const userName = ref('')
	const showClearIcon = ref(false)
	const searchInput = () => {
		console.log(userName.value)
		if (userName.value) {
			showClearIcon.value = true
		} else {
			showClearIcon.value = false
		}
		initFollowList()
	}

	const clearIcon = () => {
		showClearIcon.value = false
		userName.value = ""
		initFollowList()
	}

	const listData = ref([

	])

	function initFollowList() {
		queryMyFollow({ data: { "pageSize": 100, "userName": userName.value } }).then(res => {
			listData.value = res.data.list
		})
	}

	const toliaotian = (userId) => {
		const conversationID = `C2C${userId}`;
		uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${userId}` });
	}

	const chooseFollow = (userId, userIndex) => {
		uni.showActionSheet({
			itemList: ['取消关注'],
			success: function (res) {
				if (res.tapIndex == 0) {
					saveFollow({ data: { userId: userId } }).then(res => {
						listData.value[userIndex].interrelationFlag = 'FOLLOW'
					})
				}
			}
		});
	}

	const doCancelFollow = (userId, userIndex) => {
		saveFollow({ data: { userId: userId } }).then(res => {
			listData.value[userIndex].interrelationFlag = 'FOLLOW'
		})
	}
	const doSaveFollow = (userId, userIndex) => {
		saveFollow({ data: { userId: userId } }).then(res => {
			listData.value[userIndex].interrelationFlag = 'NO'
		})
	}

	// 跳转到帖子用户详情
	const toUser = (userId : string) => {
		// const areaType = queryType.value[isTop.value].key == 'FIND' ? 'NATIONAL' : (queryType.value[isTop.value].key == 'IN_THE_VICINITY' ? 'LOCAL' : '')
		uni.navigateTo({
			url: `/pages/qiangqiang/user?userId=${userId}&areaType=NATIONAL`
		})
	}

	// 跳转到用户详情
	const toPersonInfo = (userId : string) => {
		uni.navigateTo({
			url: '/pages/my/personInfo?userId=' + userId
		})
	}


	// 跳转到店铺详情
	const toPersonStore = (storeId) => {
		uni.navigateTo({
			url: `/pages/shop/index?id=${storeId}`
		})
	}

	initFollowList()
</script>

<style lang="scss" scoped>
	.search {
		margin: 0 auto;
		padding: 21rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 678rpx;
		height: 74rpx;
		background: #F5F5F5;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		opacity: 0.9;
		margin-bottom: 2vh;
	}

	.listItem {
		padding: 1vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.listContent {
		padding: 0.5vw 5vw;
	}

	.follow {
		display: flex;
		margin-left: 1vh;
		justify-content: center;
		align-items: center;
		width: 115rpx;
		height: 58rpx;
		background: #E4E2FC;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>